<template>
  <view class="goods-card" @click="handleClick">
    <!-- 商品图片 -->
    <view class="image-container">
      <image
        class="goods-image"
        :src="goods.images[0]"
        mode="aspectFill"
        :lazy-load="true"
      />
      <!-- 状态标签 -->
      <view class="status-tag" v-if="goods.status === 'sold'">
        <text class="status-text">已售</text>
      </view>
      <!-- 收藏按钮 -->
      <view
        class="favorite-btn"
        @click.stop="toggleFavorite"
        v-if="showFavorite"
      >
        <uni-icons
          :type="isFavorited ? 'heart-filled' : 'heart'"
          :color="isFavorited ? '#FF4444' : '#FFFFFF'"
          size="20"
        />
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="goods-info">
      <!-- 商品标题 -->
      <text class="goods-title">{{ goods.title }}</text>

      <!-- 价格信息 -->
      <view class="price-container">
        <text class="current-price">¥{{ formatPrice(goods.price) }}</text>
        <text
          class="original-price"
          v-if="goods.originalPrice && goods.originalPrice > goods.price"
        >
          ¥{{ formatPrice(goods.originalPrice) }}
        </text>
      </view>

      <!-- 商品描述 -->
      <text class="goods-description" v-if="showDescription">{{
        goods.description
      }}</text>

      <!-- 底部信息 -->
      <view class="bottom-info">
        <!-- 卖家信息 -->
        <view class="seller-info" v-if="showSeller">
          <image
            class="seller-avatar"
            :src="goods.user.avatar"
            mode="aspectFill"
          />
          <text class="seller-name">{{ goods.user.nickname }}</text>
        </view>

        <!-- 统计信息 -->
        <view class="stats-info">
          <text class="view-count" v-if="showViewCount"
            >{{ goods.viewCount }}浏览</text
          >
          <text class="favorite-count" v-if="showFavoriteCount"
            >{{ goods.favoriteCount }}收藏</text
          >
          <text class="publish-time" v-if="showTime">{{
            formatTime(goods.createdAt)
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { formatPrice, formatTime } from "../../utils/format";
import type { GoodsItem } from "../../types/goods";

// Props 定义
interface Props {
  goods: GoodsItem;
  showFavorite?: boolean;
  showSeller?: boolean;
  showDescription?: boolean;
  showViewCount?: boolean;
  showFavoriteCount?: boolean;
  showTime?: boolean;
  cardMode?: "grid" | "list";
}

const props = withDefaults(defineProps<Props>(), {
  showFavorite: true,
  showSeller: true,
  showDescription: false,
  showViewCount: true,
  showFavoriteCount: false,
  showTime: true,
  cardMode: "grid",
});

// Emits 定义
interface Emits {
  click: [goods: GoodsItem];
  favorite: [goods: GoodsItem, isFavorited: boolean];
}

const emit = defineEmits<Emits>();

// 收藏状态
const isFavorited = ref(false);

// 计算样式类
const cardClass = computed(() => {
  return {
    "goods-card": true,
    "grid-mode": props.cardMode === "grid",
    "list-mode": props.cardMode === "list",
    "sold-out": props.goods.status === "sold",
  };
});

// 处理卡片点击
const handleClick = () => {
  emit("click", props.goods);
};

// 切换收藏状态
const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value;
  emit("favorite", props.goods, isFavorited.value);

  // 显示提示
  uni.showToast({
    title: isFavorited.value ? "已收藏" : "已取消收藏",
    icon: "none",
    duration: 1500,
  });
};
</script>

<style lang="scss" scoped>
.goods-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  cursor: pointer;

  &:active {
    transform: scale(0.98);
  }

  &.sold-out {
    opacity: 0.7;

    .goods-image {
      filter: grayscale(0.3);
    }
  }

  // 网格模式（默认）
  &.grid-mode {
    .image-container {
      height: 300rpx;
    }

    .goods-info {
      padding: 20rpx;
    }

    .goods-title {
      height: 80rpx;
      line-height: 40rpx;
      -webkit-line-clamp: 2;
    }
  }

  // 列表模式
  &.list-mode {
    display: flex;
    padding: 20rpx;

    .image-container {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .goods-info {
      flex: 1;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .goods-title {
      height: auto;
      margin-bottom: 10rpx;
    }

    .goods-description {
      display: block;
      margin: 10rpx 0;
    }
  }
}

.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.goods-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.status-tag {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.status-text {
  font-size: 22rpx;
  color: #ffffff;
}

.favorite-btn {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;

  &:active {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.goods-info {
  display: flex;
  flex-direction: column;
}

.goods-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 15rpx;
}

.price-container {
  display: flex;
  align-items: baseline;
  gap: 10rpx;
  margin-bottom: 15rpx;
}

.current-price {
  font-size: 32rpx;
  color: #ff4444;
  font-weight: bold;
}

.original-price {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
}

.goods-description {
  font-size: 24rpx;
  color: #666666;
  line-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 15rpx;
}

.bottom-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.seller-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.seller-avatar {
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
}

.seller-name {
  font-size: 22rpx;
  color: #666666;
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-info {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.view-count,
.favorite-count,
.publish-time {
  font-size: 22rpx;
  color: #999999;
}

// 响应式适配
@media screen and (max-width: 750rpx) {
  .goods-card.grid-mode {
    .image-container {
      height: 250rpx;
    }

    .goods-title {
      font-size: 26rpx;
    }

    .current-price {
      font-size: 28rpx;
    }
  }

  .goods-card.list-mode {
    .image-container {
      width: 160rpx;
      height: 160rpx;
    }
  }
}
</style>
